<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>数据 mock&联调 | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架">
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css">
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <link rel="modulepreload" href="/doc-next/assets/guide_mock.md.7ad03e52.lean.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <meta name="author" content="Vbenjs Team">
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue vben admin docs">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="数据 mock&amp;联调 | Vben Admin">
    <meta property="og:title" content="数据 mock&amp;联调 | Vben Admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-172e455d><div class="sidebar-button" data-v-172e455d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/doc-next/" aria-label="Vben Admin, back to home" data-v-172e455d data-v-dc837cb8><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8> Vben Admin</a><div class="flex-grow" data-v-172e455d></div><div class="nav" data-v-172e455d><nav class="nav-links" data-v-172e455d data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-172e455d><div class="item" data-v-172e455d><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display: none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-172e455d><a class="nav-btn" href="https://github.com/anncwb/vue-vben-admin" target="_blank" aria-label="View GitHub Repo" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-172e455d><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/introduction">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/">开始</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/settings">项目配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/router">路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/menu">菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/auth">权限</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/doc-next/guide/mock">Mock&amp;联调</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#开发环境">开发环境</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#配置">配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#跨域处理">跨域处理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#没有跨域时的配置">没有跨域时的配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#跨域原理解析">跨域原理解析</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#生产环境">生产环境</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#接口请求">接口请求</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#axios-配置">axios 配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#index-ts-配置说明">index.ts 配置说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#更改参数格式">更改参数格式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#多个接口地址">多个接口地址</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#删除请求-url-携带的时间戳参数">删除请求 URL 携带的时间戳参数</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#mock-服务">Mock 服务</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#本地-mock">本地 Mock</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#线上-mock">线上 mock</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/component">组件注册</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/design">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/lib">外部模块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/deploy">构建&amp;部署</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/electron">Electron</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">深入</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/cors">跨域处理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/icon">图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/i18n">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/lint">项目规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/dark">黑暗主题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其他</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/faq">常见问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/doubt">常见疑点</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/server">测试服务</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><h1 id="数据-mock-联调"><a class="header-anchor" href="#数据-mock-联调" aria-hidden="true">#</a> 数据 mock&amp;联调</h1><h2 id="开发环境"><a class="header-anchor" href="#开发环境" aria-hidden="true">#</a> 开发环境</h2><p>如果前端应用和后端接口服务器没有运行在同一个主机上，你需要在开发环境下将接口请求代理到接口服务器。</p><p>如果是同一个主机，可以直接请求具体的接口地址。</p><h3 id="配置"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>开发环境时候，接口地址在项目根目录下</p><p><a href="https://github.com/anncwb/vue-vben-admin/tree/main/.env.development" target="_blank" rel="noopener noreferrer">.env.development</a> 文件配置</p><div class="language-bash"><pre><code><span class="token comment"># vite 本地跨域代理</span>
<span class="token assign-left variable">VITE_PROXY</span><span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&quot;/basic-api&quot;</span>,<span class="token string">&quot;http://localhost:3000&quot;</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token comment"># 接口地址</span>
<span class="token assign-left variable">VITE_GLOB_API_URL</span><span class="token operator">=</span>/api
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>.env 文件中的字段如果是字符串，则无需加引号，默认全部为字符串</li><li>VITE_PROXY 不能换行</li></ul></div><h3 id="跨域处理"><a class="header-anchor" href="#跨域处理" aria-hidden="true">#</a> 跨域处理</h3><p>如果你在 <code>src/api/</code> 下面的接口为下方代码，且 <strong>.env.development</strong> 文件配置如下注释，则在控制台看到的地址为 <code>http://localhost:3100/basic-api/login</code>。</p><p>由于 <code>/basic-api</code> 匹配到了设置的 <code>VITE_PROXY</code>，所以上方实际是请求 <strong><a href="http://localhost:3000/login" target="_blank" rel="noopener noreferrer">http://localhost:3000/login</a></strong>，这样同时也解决了跨域问题。（<strong>3100</strong>为项目端口号，<strong><a href="http://localhost:3000" target="_blank" rel="noopener noreferrer">http://localhost:3000</a></strong>为PROXY代理的目标地址）</p><div class="language-ts"><pre><code><span class="token comment">// .env.development</span>
<span class="token comment">// VITE_PROXY=[[&quot;/basic-api&quot;,&quot;http://localhost:3000&quot;]]</span>
<span class="token comment">// VITE_GLOB_API_URL=/basic-api</span>

<span class="token keyword">enum</span> Api <span class="token punctuation">{</span>
  Login <span class="token operator">=</span> <span class="token string">&#39;/login&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * @description: 用户登陆
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">loginApi</span><span class="token punctuation">(</span>params<span class="token operator">:</span> LoginParams<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> http<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">request</span><span class="token generic class-name"><span class="token operator">&lt;</span>LoginResultModel<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> Api<span class="token punctuation">.</span>Login<span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">,</span>
    params<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="没有跨域时的配置"><a class="header-anchor" href="#没有跨域时的配置" aria-hidden="true">#</a> 没有跨域时的配置</h3><p>如果没有跨域问题，可以直接忽略 <strong>VITE_PROXY</strong> 配置，直接将接口地址设置在 <strong>VITE_GLOB_API_URL</strong></p><div class="language-bash"><pre><code><span class="token comment"># 例如接口地址为 http://localhost:3000 则</span>
<span class="token assign-left variable">VITE_GLOB_API_URL</span><span class="token operator">=</span>http://localhost:3000
</code></pre></div><p>如果有跨域问题，将 <strong>VITE_GLOB_API_URL</strong> 设置为跟 <strong>VITE_PROXY</strong> 内其中一个数组的第一个项一致的值即可。</p><p>下方的接口地址设置为 <code>/basic-api</code>，当请求发出的时候会经过 Vite 的 proxy 代理，匹配到了我们设置的 <strong>VITE_PROXY</strong> 规则，将 <code>/basic-api</code> 转化为 <code>http://localhost:3000</code> 进行请求</p><div class="language-bash"><pre><code><span class="token comment"># 例如接口地址为 http://localhost:3000 则</span>
<span class="token assign-left variable">VITE_PROXY</span><span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&quot;/basic-api&quot;</span>,<span class="token string">&quot;http://localhost:3000&quot;</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token comment"># 接口地址</span>
<span class="token assign-left variable">VITE_GLOB_API_URL</span><span class="token operator">=</span>/basic-api
</code></pre></div><h3 id="跨域原理解析"><a class="header-anchor" href="#跨域原理解析" aria-hidden="true">#</a> 跨域原理解析</h3><p>在 <code>vite.config.ts</code> 配置文件中，提供了 server 的 proxy 功能，用于代理 API 请求。</p><div class="language-ts"><pre><code>server<span class="token operator">:</span> <span class="token punctuation">{</span>
  proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;/basic-api&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
      target<span class="token operator">:</span> <span class="token string">&#39;http://localhost:3000&#39;</span><span class="token punctuation">,</span>
      changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      ws<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token function-variable function">rewrite</span><span class="token operator">:</span> <span class="token punctuation">(</span>path<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> path<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">^/basic-api</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">注意</p><p>从浏览器控制台的 Network 看，请求是 <code>http://localhost:3000/basic-api/xxx</code>，这是因为 proxy 配置不会改变本地请求的 url。</p></div><h2 id="生产环境"><a class="header-anchor" href="#生产环境" aria-hidden="true">#</a> 生产环境</h2><p>生产环境接口地址在项目根目录下 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/.env.production" target="_blank" rel="noopener noreferrer">.env.production</a> 文件配置。</p><p>生产环境接口地址值需要修改 <strong>VITE_GLOB_API_URL</strong>，如果出现跨域问题，可以使用 nginx 或者后台开启 cors 进行处理</p><div class="tip custom-block"><p class="custom-block-title">打包后如何进行地址修改?</p><p><strong>VITE_GLOB_*</strong> 开头的变量会在打包的时候注入 <strong>_app.config.js</strong> 文件内。</p><p>在 <strong>dist/_app.config.js</strong> 修改相应的接口地址后刷新页面即可，不需要在根据不同环境打包多次，一次打包可以用于多个不同接口环境的部署。</p></div><h2 id="接口请求"><a class="header-anchor" href="#接口请求" aria-hidden="true">#</a> 接口请求</h2><p>在 vue-vben-admin 中:</p><ol><li>页面交互操作；</li><li>调用统一管理的 api 请求函数；</li><li>使用封装的 axios.ts 发送请求；</li><li>获取服务端返回数据</li><li>更新 data；</li></ol><p>接口统一存放于 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/api" target="_blank" rel="noopener noreferrer">src/api/</a> 下面管理</p><p>以登陆接口为例:</p><p>在 <strong>src/api/</strong> 内新建模块文件，其中参数与返回值最好定义一下类型，方便校验。虽然麻烦，但是后续维护字段很方便。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>类型定义文件可以抽取出去统一管理，具体参考项目</p></div><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defHttp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/utils/http/axios&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> LoginParams<span class="token punctuation">,</span> LoginResultModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./model/userModel&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">enum</span> Api <span class="token punctuation">{</span>
  Login <span class="token operator">=</span> <span class="token string">&#39;/login&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">loginApi</span><span class="token punctuation">(</span>params<span class="token operator">:</span> LoginParams<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> defHttp<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">request</span><span class="token generic class-name"><span class="token operator">&lt;</span>LoginResultModel<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> Api<span class="token punctuation">.</span>Login<span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">,</span>
    params<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="axios-配置"><a class="header-anchor" href="#axios-配置" aria-hidden="true">#</a> axios 配置</h2><p><strong>axios</strong> 请求封装存放于 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/utils/http/axios" target="_blank" rel="noopener noreferrer">src/utils/http/axios</a> 文件夹内部</p><p>除 <code>index.ts</code> 文件内容需要根据项目自行修改外，其余文件无需修改</p><div class="language-js"><pre><code>
├── Axios<span class="token punctuation">.</span>ts <span class="token comment">// axios实例</span>
├── axiosCancel<span class="token punctuation">.</span>ts <span class="token comment">// axiosCancel实例，取消重复请求</span>
├── axiosTransform<span class="token punctuation">.</span>ts <span class="token comment">// 数据转换类</span>
├── checkStatus<span class="token punctuation">.</span>ts <span class="token comment">// 返回状态值校验</span>
├── index<span class="token punctuation">.</span>ts <span class="token comment">// 接口返回统一处理</span>

</code></pre></div><h3 id="index-ts-配置说明"><a class="header-anchor" href="#index-ts-配置说明" aria-hidden="true">#</a> index.ts 配置说明</h3><div class="language-ts"><pre><code><span class="token keyword">const</span> axios <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VAxios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 认证方案，例如: Bearer</span>
  <span class="token comment">// https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes</span>
  authenticationScheme<span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// 接口超时时间 单位毫秒</span>
  timeout<span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span>
  <span class="token comment">// 接口可能会有通用的地址部分，可以统一抽取出来</span>
  prefixUrl<span class="token operator">:</span> prefix<span class="token punctuation">,</span>
  headers<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&#39;Content-Type&#39;</span><span class="token operator">:</span> ContentTypeEnum<span class="token punctuation">.</span><span class="token constant">JSON</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 数据处理方式，见下方说明</span>
  transform<span class="token punctuation">,</span>
  <span class="token comment">// 配置项，下面的选项都可以在独立的接口请求中覆盖</span>
  requestOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 默认将prefix 添加到url</span>
    joinPrefix<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否返回原生响应头 比如：需要获取响应头时使用该属性</span>
    isReturnNativeResponse<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 需要对返回数据进行处理</span>
    isTransformRequestResult<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// post请求的时候添加参数到url</span>
    joinParamsToUrl<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 格式化提交参数时间</span>
    formatDate<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 消息提示类型</span>
    errorMessageMode<span class="token operator">:</span> <span class="token string">&#39;message&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 接口地址</span>
    apiUrl<span class="token operator">:</span> globSetting<span class="token punctuation">.</span>apiUrl<span class="token punctuation">,</span>
    <span class="token comment">//  是否加入时间戳</span>
    joinTime<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 忽略重复请求</span>
    ignoreCancelToken<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>transform 数据处理说明</strong></p><p>类型定义，见 <strong>axiosTransform.ts</strong> 文件</p><div class="language-js"><pre><code><span class="token keyword">export</span> abstract <span class="token keyword">class</span> <span class="token class-name">AxiosTransform</span> <span class="token punctuation">{</span>
  <span class="token comment">/**
   * @description: 请求之前处理配置
   */</span>
  beforeRequestHook<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">,</span> options<span class="token operator">:</span> RequestOptions</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> AxiosRequestConfig<span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求成功处理
   */</span>
  transformRequestData<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res<span class="token operator">:</span> AxiosResponse<span class="token operator">&lt;</span>Result<span class="token operator">&gt;</span><span class="token punctuation">,</span> options<span class="token operator">:</span> RequestOptions</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> any<span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求失败处理
   */</span>
  requestCatch<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> Error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Promise<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span><span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求之前的拦截器
   */</span>
  requestInterceptors<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token operator">:</span> AxiosRequestConfig</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> AxiosRequestConfig<span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求之后的拦截器
   */</span>
  responseInterceptors<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res<span class="token operator">:</span> AxiosResponse<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> AxiosResponse<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span><span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求之前的拦截器错误处理
   */</span>
  requestInterceptorsCatch<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token operator">:</span> Error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">/**
   * @description: 请求之后的拦截器错误处理
   */</span>
  responseInterceptorsCatch<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token operator">:</span> Error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>


</code></pre></div><p>项目默认 transform 处理逻辑，可以根据各自项目进行处理。一般需要更改的部分为下方代码，见代码注释说明</p><div class="language-js"><pre><code><span class="token comment">/**
 * @description: 数据处理，方便区分多种处理方式
 */</span>
<span class="token keyword">const</span> transform<span class="token operator">:</span> AxiosTransform <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">/**
   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
   */</span>
  <span class="token function-variable function">transformRequestHook</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res<span class="token operator">:</span> AxiosResponse<span class="token operator">&lt;</span>Result<span class="token operator">&gt;</span><span class="token punctuation">,</span> options<span class="token operator">:</span> RequestOptions</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> isTransformResponse<span class="token punctuation">,</span> isReturnNativeResponse <span class="token punctuation">}</span> <span class="token operator">=</span> options<span class="token punctuation">;</span>
    <span class="token comment">// 是否返回原生响应头 比如：需要获取响应头时使用该属性</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isReturnNativeResponse<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> res<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 不进行任何处理，直接返回</span>
    <span class="token comment">// 用于页面代码可能需要直接获取code，data，message这些信息时开启</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isTransformResponse<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 错误的时候返回</span>

    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> res<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// return &#39;[HTTP] Request has no return value&#39;;</span>
      <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.apiRequestFailed&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> result<span class="token punctuation">,</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">;</span>

    <span class="token comment">// 这里逻辑可以根据项目进行修改</span>
    <span class="token keyword">const</span> hasSuccess <span class="token operator">=</span> data <span class="token operator">&amp;&amp;</span> Reflect<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token string">&#39;code&#39;</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> code <span class="token operator">===</span> ResultEnum<span class="token punctuation">.</span><span class="token constant">SUCCESS</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>hasSuccess<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> result<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// 在此处根据自己项目的实际情况对不同的code执行不同的操作</span>
    <span class="token comment">// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可</span>
    <span class="token keyword">let</span> timeoutMsg <span class="token operator">=</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>code<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> ResultEnum<span class="token punctuation">.</span><span class="token constant">TIMEOUT</span><span class="token operator">:</span>
        timeoutMsg <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.timeoutMessage&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">default</span><span class="token operator">:</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          timeoutMsg <span class="token operator">=</span> message<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误</span>
    <span class="token comment">// errorMessageMode=&#39;none&#39; 一般是调用时明确表示不希望自动弹出错误提示</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span>errorMessageMode <span class="token operator">===</span> <span class="token string">&#39;modal&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">createErrorModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.errorTip&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> content<span class="token operator">:</span> timeoutMsg <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span>errorMessageMode <span class="token operator">===</span> <span class="token string">&#39;message&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      createMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>timeoutMsg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>timeoutMsg <span class="token operator">||</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.apiRequestFailed&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 请求之前处理config</span>
  <span class="token function-variable function">beforeRequestHook</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> apiUrl<span class="token punctuation">,</span> joinPrefix<span class="token punctuation">,</span> joinParamsToUrl<span class="token punctuation">,</span> formatDate<span class="token punctuation">,</span> joinTime <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token operator">=</span> options<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>joinPrefix<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      config<span class="token punctuation">.</span>url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urlPrefix<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>apiUrl <span class="token operator">&amp;&amp;</span> <span class="token function">isString</span><span class="token punctuation">(</span>apiUrl<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      config<span class="token punctuation">.</span>url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>apiUrl<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">const</span> params <span class="token operator">=</span> config<span class="token punctuation">.</span>params <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>method<span class="token operator">?.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> RequestEnum<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isString</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 给 get 请求加上时间戳参数，避免从缓存中拿数据。</span>
        config<span class="token punctuation">.</span>params <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>params <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">joinTimestamp</span><span class="token punctuation">(</span>joinTime<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// 兼容restful风格</span>
        config<span class="token punctuation">.</span>url <span class="token operator">=</span> config<span class="token punctuation">.</span>url <span class="token operator">+</span> params <span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">joinTimestamp</span><span class="token punctuation">(</span>joinTime<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
        config<span class="token punctuation">.</span>params <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isString</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        formatDate <span class="token operator">&amp;&amp;</span> <span class="token function">formatRequestDate</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span>
        config<span class="token punctuation">.</span>data <span class="token operator">=</span> params<span class="token punctuation">;</span>
        config<span class="token punctuation">.</span>params <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>joinParamsToUrl<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          config<span class="token punctuation">.</span>url <span class="token operator">=</span> <span class="token function">setObjToUrlParams</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>url <span class="token keyword">as</span> string<span class="token punctuation">,</span> config<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// 兼容restful风格</span>
        config<span class="token punctuation">.</span>url <span class="token operator">=</span> config<span class="token punctuation">.</span>url <span class="token operator">+</span> params<span class="token punctuation">;</span>
        config<span class="token punctuation">.</span>params <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> config<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * @description: 请求拦截器处理
   */</span>
  <span class="token function-variable function">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 请求之前处理config</span>
    <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// jwt token</span>
      config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> options<span class="token punctuation">.</span>authenticationScheme
        <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>options<span class="token punctuation">.</span>authenticationScheme<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>token<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
        <span class="token operator">:</span> token<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> config<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * @description: 响应拦截器处理
   */</span>
  <span class="token function-variable function">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res<span class="token operator">:</span> AxiosResponse<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * @description: 响应错误处理
   */</span>
  <span class="token function-variable function">responseInterceptorsCatch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> errorLogStore <span class="token operator">=</span> <span class="token function">useErrorLogStoreWithOut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    errorLogStore<span class="token punctuation">.</span><span class="token function">addAjaxErrorInfo</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> response<span class="token punctuation">,</span> code<span class="token punctuation">,</span> message<span class="token punctuation">,</span> config <span class="token punctuation">}</span> <span class="token operator">=</span> error <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> errorMessageMode <span class="token operator">=</span> config<span class="token operator">?.</span>requestOptions<span class="token operator">?.</span>errorMessageMode <span class="token operator">||</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> msg<span class="token operator">:</span> string <span class="token operator">=</span> response<span class="token operator">?.</span>data<span class="token operator">?.</span>error<span class="token operator">?.</span>message <span class="token operator">??</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> err<span class="token operator">:</span> string <span class="token operator">=</span> error<span class="token operator">?.</span>toString<span class="token operator">?.</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> errMessage <span class="token operator">=</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">===</span> <span class="token string">&#39;ECONNABORTED&#39;</span> <span class="token operator">&amp;&amp;</span> message<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&#39;timeout&#39;</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        errMessage <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.apiTimeoutMessage&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token operator">?.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;Network Error&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        errMessage <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.networkExceptionMsg&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>errMessage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>errorMessageMode <span class="token operator">===</span> <span class="token string">&#39;modal&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">createErrorModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">&#39;sys.api.errorTip&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> content<span class="token operator">:</span> errMessage <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>errorMessageMode <span class="token operator">===</span> <span class="token string">&#39;message&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          createMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>errMessage<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">checkStatus</span><span class="token punctuation">(</span>error<span class="token operator">?.</span>response<span class="token operator">?.</span>status<span class="token punctuation">,</span> msg<span class="token punctuation">,</span> errorMessageMode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="更改参数格式"><a class="header-anchor" href="#更改参数格式" aria-hidden="true">#</a> 更改参数格式</h3><p>项目接口默认为 Json 参数格式，即 <code>headers: { &#39;Content-Type&#39;: ContentTypeEnum.JSON }</code>,</p><p>如果需要更改为 <code>form-data</code> 格式，更改 headers 的 <code>&#39;Content-Type</code> 为 <code>ContentTypeEnum.FORM_URLENCODED</code> 即可</p><h3 id="多个接口地址"><a class="header-anchor" href="#多个接口地址" aria-hidden="true">#</a> 多个接口地址</h3><p>当项目中需要用到多个接口地址时, 可以在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/utils/http/axios/index.ts" target="_blank" rel="noopener noreferrer">src/utils/http/axios/index.ts</a> 导出多个 axios 实例</p><div class="language-ts"><pre><code><span class="token comment">// 目前只导出一个默认实例，接口地址对应的是环境变量中的 VITE_GLOB_API_URL 接口地址</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> defHttp <span class="token operator">=</span> <span class="token function">createAxios</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 需要有其他接口地址的可以在后面添加</span>

<span class="token comment">// other api url</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> otherHttp <span class="token operator">=</span> <span class="token function">createAxios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  requestOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
    apiUrl<span class="token operator">:</span> <span class="token string">&#39;xxx&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="删除请求-url-携带的时间戳参数"><a class="header-anchor" href="#删除请求-url-携带的时间戳参数" aria-hidden="true">#</a> 删除请求 URL 携带的时间戳参数</h3><p>如果不需要 url 上面默认携带的时间戳参数 <code>?_t=xxx</code></p><div class="language-ts"><pre><code><span class="token keyword">const</span> axios <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VAxios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  requestOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 是否加入时间戳</span>
    joinTime<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="mock-服务"><a class="header-anchor" href="#mock-服务" aria-hidden="true">#</a> Mock 服务</h2><p>Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发进程所阻塞。</p><p>本项目使用 <a href="https://github.com/anncwb/vite-plugin-mock" target="_blank" rel="noopener noreferrer">vite-plugin-mock</a> 来进行 mock 数据处理。<strong>项目内 mock 服务分本地和线上</strong>。</p><h3 id="本地-mock"><a class="header-anchor" href="#本地-mock" aria-hidden="true">#</a> 本地 Mock</h3><p>本地 mock 采用 Node.js 中间件进行参数拦截（不采用 mock.js 的原因是本地开发看不到请求参数和响应结果）。</p><h4 id="如何新增-mock-接口"><a class="header-anchor" href="#如何新增-mock-接口" aria-hidden="true">#</a> 如何新增 mock 接口</h4><p>如果你想添加 mock 数据，只要在根目录下找到 mock 文件，添加对应的接口，对其进行拦截和模拟数据。</p><p>在 mock 文件夹内新建文件</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>文件新增后会自动更新，不需要手动重启，可以在代码控制台查看日志信息 mock 文件夹内会自动注册，排除以_开头的文件夹及文件</p></div><p>例:</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> MockMethod <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vite-plugin-mock&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> resultPageSuccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;../_util&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> demoList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> result<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator">&lt;</span> <span class="token number">60</span><span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
      beginTime<span class="token operator">:</span> <span class="token string">&#39;@datetime&#39;</span><span class="token punctuation">,</span>
      endTime<span class="token operator">:</span> <span class="token string">&#39;@datetime&#39;</span><span class="token punctuation">,</span>
      address<span class="token operator">:</span> <span class="token string">&#39;@city()&#39;</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">&#39;@cname()&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;no|100000-10000000&#39;</span><span class="token operator">:</span> <span class="token number">100000</span><span class="token punctuation">,</span>
      <span class="token string">&#39;status|1&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;正常&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;启用&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;停用&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">&#39;/api/table/getDemoList&#39;</span><span class="token punctuation">,</span>
    timeout<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">&#39;get&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">response</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> query <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> page <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> pageSize <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">}</span> <span class="token operator">=</span> query<span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token function">resultPageSuccess</span><span class="token punctuation">(</span>page<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> demoList<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span> <span class="token keyword">as</span> MockMethod<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>mock 的值可以直接使用 <a href="https://github.com/nuysoft/Mock/wiki" target="_blank" rel="noopener noreferrer">mockjs</a> 的语法。</p></div><h4 id="接口格式"><a class="header-anchor" href="#接口格式" aria-hidden="true">#</a> 接口格式</h4><div class="language-ts"><pre><code><span class="token punctuation">{</span>
  url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// mock 接口地址</span>
  method<span class="token operator">?</span><span class="token operator">:</span> MethodType<span class="token punctuation">;</span> <span class="token comment">// 请求方式</span>
  timeout<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 延时时间</span>
  statusCode<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 响应状态码</span>
  response<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>opt<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 响应结果</span>
      body<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
      query<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">|</span> object<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="参数获取"><a class="header-anchor" href="#参数获取" aria-hidden="true">#</a> 参数获取</h4><p><strong>GET 接口：</strong><code> ({ query }) =&gt; { }</code></p><p><strong>POST 接口：</strong><code> ({ body }) =&gt; { }</code></p><h4 id="util-说明"><a class="header-anchor" href="#util-说明" aria-hidden="true">#</a> util 说明</h4><p>可在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/mock/_util.ts" target="_blank" rel="noopener noreferrer">代码</a> 中查看</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>util 只作为服务处理结果数据使用。可以不用，如需使用可自行封装，需要将对应的字段改为接口的返回结构</p></div><h4 id="匹配"><a class="header-anchor" href="#匹配" aria-hidden="true">#</a> 匹配</h4><p>在 <code>src/api</code> 下面，如果接口匹配到 mock，则会优先使用 mock 进行响应</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defHttp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/utils/http/axios&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> LoginParams<span class="token punctuation">,</span> LoginResultModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./model/userModel&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">enum</span> Api <span class="token punctuation">{</span>
  Login <span class="token operator">=</span> <span class="token string">&#39;/login&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * @description: user login api
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">loginApi</span><span class="token punctuation">(</span>params<span class="token operator">:</span> LoginParams<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> defHttp<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">request</span><span class="token generic class-name"><span class="token operator">&lt;</span>LoginResultModel<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
    <span class="token punctuation">{</span>
      url<span class="token operator">:</span> Api<span class="token punctuation">.</span>Login<span class="token punctuation">,</span>
      method<span class="token operator">:</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">,</span>
      params<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      errorMessageMode<span class="token operator">:</span> <span class="token string">&#39;modal&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 会匹配到上方的</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">&#39;/api/login&#39;</span><span class="token punctuation">,</span>
    timeout<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">response</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> body <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">resultPageSuccess</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span> <span class="token keyword">as</span> MockMethod<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="接口有了，如何去掉-mock"><a class="header-anchor" href="#接口有了，如何去掉-mock" aria-hidden="true">#</a> 接口有了，如何去掉 mock</h4><p>当后台接口已经开发完成，只需要将相应的 mock 函数去掉即可。</p><p>以上方接口为例，假如后台接口 login 已经开发完成，则只需要删除/注释掉下方代码即可</p><div class="language-ts"><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">&#39;/api/login&#39;</span><span class="token punctuation">,</span>
    timeout<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">&#39;POST&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">response</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> body <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">resultPageSuccess</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span> <span class="token keyword">as</span> MockMethod<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="线上-mock"><a class="header-anchor" href="#线上-mock" aria-hidden="true">#</a> 线上 mock</h3><p>由于该项目是一个展示类项目，线上也是用 mock 数据，所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。</p><p>项目线上 mock 采用的是 <a href="https://github.com/nuysoft/Mock/wiki" target="_blank" rel="noopener noreferrer">mockjs</a> 进行 mock 数据模拟。</p><h4 id="线上如何开启-mock"><a class="header-anchor" href="#线上如何开启-mock" aria-hidden="true">#</a> 线上如何开启 mock</h4><div class="warning custom-block"><p class="custom-block-title">注意</p><p>线上开启 mock 只适用于一些简单的示例网站及预览网站。<strong>一定不要在正式的生产环境开启！！！</strong></p></div><ol><li>修改 .env.production 文件内的 <code>VITE_USE_MOCK</code> 的值为 true</li></ol><div class="language-ts"><pre><code><span class="token constant">VITE_USE_MOCK</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/mock/_createProductionServer.ts" target="_blank" rel="noopener noreferrer">mock/_createProductionServer.ts</a> 文件中引入需要的 mock 文件</li></ol><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createProdMockServer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vite-plugin-mock/es/createProdMockServer&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> modules <span class="token operator">=</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span><span class="token function">globEager</span><span class="token punctuation">(</span><span class="token string">&#39;./**/*.ts&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> mockModules<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>modules<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>key<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;/_&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  mockModules<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>modules<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setupProdMockServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">createProdMockServer</span><span class="token punctuation">(</span>mockModules<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/build/vite/plugin/mock.ts" target="_blank" rel="noopener noreferrer">build/vite/plugin/mock.ts</a> 里面引入</li></ol><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> viteMockServe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vite-plugin-mock&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">configMockPlugin</span><span class="token punctuation">(</span>isBuild<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">viteMockServe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    injectCode<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
      import { setupProdMockServer } from &#39;../mock/_createProductionServer&#39;;

      setupProdMockServer();
      </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">为什么通过插件注入代码而不是直接在 main.ts 内插入</p><p>在插件内通过 <code>injectCode</code> 插入代码，方便控制 mockjs 是否被打包到最终代码内。如果在 main.ts 内判断，如果关闭了 mock 功能，mockjs 也会打包到构建文件内，这样会增加打包体积。</p></div><p>到这里线上 mock 就配置完成了。线上与本地差异不大，比较大的区别是线上在控制台内看不到接口请求日志。</p></div></div><footer class="page-footer" data-v-4c107763 data-v-ddc19c16><div class="edit" data-v-ddc19c16><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc><a class="link" href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/guide/mock.md" target="_blank" rel="noopener noreferrer" data-v-5c10c4bc>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5c10c4bc><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-ddc19c16><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><a class="link" href="/doc-next/guide/auth" data-v-0002a634><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-0002a634><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-0002a634>权限</span></a></div><div class="next" data-v-0002a634><a class="link" href="/doc-next/guide/component" data-v-0002a634><span class="text" data-v-0002a634>组件注册</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"2734edcc\",\"readme.md\":\"e1519bf2\",\"dep_cors.md\":\"204fc85f\",\"dep_dark.md\":\"43a11d42\",\"dep_i18n.md\":\"a802b766\",\"dep_icon.md\":\"439f8e1c\",\"dep_lint.md\":\"e8646b9e\",\"components_auth.md\":\"b02963b8\",\"components_basic.md\":\"fca49067\",\"components_click-out-side.md\":\"88043de3\",\"components_code-editor.md\":\"6afcba77\",\"components_collapse-container.md\":\"b2928273\",\"components_count-down.md\":\"c92778a4\",\"components_count-to.md\":\"c17f243c\",\"components_cropper.md\":\"4a855951\",\"components_desc.md\":\"44431141\",\"components_drawer.md\":\"f8ba528e\",\"components_excel.md\":\"d99f9b91\",\"components_flow-chart.md\":\"edffb78e\",\"components_form.md\":\"047930e8\",\"components_icon.md\":\"0ffa2e82\",\"components_introduction.md\":\"7cb286c9\",\"components_json-preview.md\":\"c1dd06c0\",\"components_lazy-container.md\":\"60c806dc\",\"components_loading.md\":\"06300eaf\",\"components_markdown.md\":\"0c696756\",\"components_modal.md\":\"135caed7\",\"components_page.md\":\"28a90d66\",\"components_pop-confirm-button.md\":\"c26f7c65\",\"components_qrcode.md\":\"dac7ed30\",\"components_scroll-container.md\":\"1dffa01f\",\"components_strength-meter.md\":\"d8a0e073\",\"components_table.md\":\"9ffc20f8\",\"components_time.md\":\"364e4fcd\",\"components_tinymce.md\":\"27726c6d\",\"components_transition.md\":\"1c742571\",\"components_tree.md\":\"9f313e94\",\"components_upload.md\":\"5eaac62a\",\"components_verify.md\":\"d40e7d3d\",\"components_virtual-scroll.md\":\"9df7959b\",\"guide_auth.md\":\"7bab7e41\",\"guide_component.md\":\"35361b68\",\"guide_deploy.md\":\"5e737a9c\",\"guide_design.md\":\"12ad7145\",\"guide_electron.md\":\"c05175be\",\"guide_index.md\":\"773f5681\",\"guide_introduction.md\":\"70896801\",\"guide_lib.md\":\"f35e142b\",\"guide_menu.md\":\"a61b3e0c\",\"guide_mock.md\":\"7ad03e52\",\"guide_router.md\":\"4af7d754\",\"guide_settings.md\":\"15dd5414\",\"other_donate.md\":\"a2bcdefe\",\"other_doubt.md\":\"7d012b2e\",\"other_faq.md\":\"e1457c01\",\"other_server.md\":\"3adeb1fd\",\"components_functional_context-menu.md\":\"c6c1cfd3\",\"components_functional_loading.md\":\"b7278715\",\"components_functional_preview.md\":\"90804e55\",\"components_glob_button.md\":\"29118f06\"}")</script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>